:root {
  color-scheme: dark;
  --sl-sidebar-width: 17rem;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

button[title="Copy code"] {
  background-color: unset;
}

span > code > button {
  display: none;
  width: 0;
  height: 0;
}

#_top {
  font-weight: 900;
  @apply dark:text-[rgb(255_245_224)] text-[rgb(38,38,43)];
}

a > code {
  text-decoration: none !important;
  text-decoration-style: unset !important;
  text-decoration-color: unset !important;
  text-decoration-thickness: unset !important;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

h2::after,
h3::after,
h4::after,
h5::after {
  content: "#";
  color: #ffffff;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  position: relative;
  visibility: hidden;
}

h2:hover::after,
h3:hover::after,
h4:hover::after,
h5:hover::after {
  visibility: visible;
}

h3 code {
  @apply !text-lg md:!text-xl;
}

pre {
  @apply !px-0 rounded-lg;
}

code {
  @apply text-sm md:text-base !leading-loose;
}

pre > code {
  /* 
   * Starlight unsets some styles so important is needed here.
   * https://github.com/withastro/starlight/blob/main/packages/starlight/style/markdown.css#L94
   */
  counter-reset: line !important;
}

figcaption {
  /* https://github.com/withastro/starlight/blob/main/packages/starlight/style/markdown.css#L4  */
  margin-bottom: -1rem;
}

code[data-theme*=" "],
code[data-theme*=" "] span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

@media (prefers-color-scheme: dark) {
  code[data-theme*=" "],
  code[data-theme*=" "] span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
}

code[data-line-numbers] {
  counter-reset: line;
}

code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  @apply inline-block w-4 mr-4 text-right text-gray-500;
}

.prose {
  @apply max-w-[55rem] sm:text-lg md:text-xl !leading-7 sm:!leading-9;
}

pre [data-line] {
  @apply px-4 border-l-2 border-l-transparent;
}

[data-highlighted-line] {
  background: rgba(200, 200, 255, 0.1);
  @apply border-l-blue-400;
}

[data-highlighted-chars] {
  @apply bg-zinc-600/50 rounded;
  box-shadow: 0 0 0 4px rgb(82 82 91 / 0.5);
}

[data-chars-id] {
  @apply shadow-none p-1 border-b-2;
}

[data-chars-id] span {
  @apply !text-inherit;
}

[data-chars-id="v"] {
  @apply !text-pink-300 bg-rose-800/50 border-b-pink-600 font-bold;
}

[data-chars-id="s"] {
  @apply !text-yellow-300 bg-yellow-800/50 border-b-yellow-600 font-bold;
}

[data-chars-id="i"] {
  @apply !text-purple-200 bg-purple-800/50 border-b-purple-600 font-bold;
}

[data-rehype-pretty-code-title] {
  @apply bg-zinc-700 text-zinc-200 rounded-t-lg py-2 px-3 font-semibold text-sm;
}

figure[data-rehype-pretty-code-figure]:has(> [data-rehype-pretty-code-title])
  pre {
  @apply !rounded-t-none;
}

figure {
  @apply mb-6 mt-1;
}

pre,
code,
figure {
  @apply overflow-x-auto;
}
p {
  @apply text-lg;
}
article p {
  @apply leading-9;
}
